<template>
  <div id="list">
  	<div class="left">
	  	<ul>
	  		<li v-for='item in navList' @click='activeNav(item)' :class='{"active":item.active}'>{{item.sortDescript}}</li>
	  	</ul>
	</div>
	<!-- tab-container -->
	<div class="right">
		<div class="headerbar">
			<div style="position:fixed">
				<div id="search">
					<searchbox></searchbox>
				</div>
				<div class="icon"><fuwuyuan></fuwuyuan></div>
				</div>
		</div>
		<div class="listShow">
            <ul>
             <li @click="selectFood(food,$event)" v-for="food in goods" class="food-item border-1px">
               <div class="iconImg">
                 <img  :src="server.server+food.pluPhotoUrl">
               </div>
               <div class="content">
                 <h2 class="name">{{food.pluDescript}}</h2>
                <!--  <p class="desc">{{food.pluIntroduction}}</p> -->
                 <div class="price">
                   <span class="now">￥{{food.pluPrice}}</span><span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
                 </div>
                 <div class="cartcontrol-wrapper">
                   <cartcontrol @add="addFood(food,$event)" :food="food"></cartcontrol>
                 </div>
               </div>
             </li>
            </ul>
		</div>
	</div>
	<carfooter ref="carfooter"></carfooter>
  </div>
</template>

<script>
import searchbox from '../common/searchBox';
import carfooter from '../common/carFooter';
import cartcontrol from '../common/cartcontrol';
import fuwuyuan from '../common/fuwuyuan';
import server from '../../conf/server';
import _ from 'lodash';
export default {
  name: 'List',
  data () {
    return {
      selected: 1,
      navList: '',
      catList:'',
      goods:'',
      server : server
    }
  },
  methods: {
  	selectFood (foodItem) {
  		this.$router.push('food')
  	},
    activeNav (item) {
    	_.map(this.navList, (eachItem)=>{eachItem.active=false});
    	item.active = true;
    	this.$http.get('/pos/WeChat/getPluAll.do',{
			    params: {
			      sortCode: item.sortCode
			    }
			})
    		.then((res)=>{
    			_.map(this.navList,(item2)=>{
	    			_.map(res.data.result,(item)=>{
    					if(item2.pluCode==item.pluCode){
    						item = item2;
    					}
	    				
	    			})
    			})
    			this.goods = res.data.result
    		})
    }, 
    addFood(food,target) {

    	this.$store.commit('addCarList',food);
    
    	this._drop(target);
    },
    _drop(target) {
        // 体验优化,异步执行下落动画
        this.$nextTick(() => {
            this.$refs.carfooter.drop(target);
        });
    },
   
  },
  mounted () {
  	this.$http.get('/pos/WeChat/getPluSort.do')
  			.then((res) => {
  				_.map(res.data.result, (eachItem)=>{eachItem.active=false});
  				this.navList=res.data.result
  				this.activeNav(this.navList[0]);
  			})
    
  },
  components: {
  	searchbox,
  	carfooter,
  	cartcontrol,
  	fuwuyuan,
  }
}
</script>
<style lang='less'>
	#list{
		display: flex;
		justify-content: space-between;
		height: 100%;
		.mint-tab-item-label{font-size: 1rem};
		.mint-navbar{
			flex-direction: column;
		}
	}
	.left{flex-direction:row;width: 2.666667rem;flex:1;
		ul {
			padding-bottom: 1.24rem;background: #f1f1f1; position: fixed;width: 2.666667rem;
			li{
				text-align: center;
				font-size: 120%;
				line-height:35px;
				padding: 0.506667rem;
				&.active{background: #fff;}
			}
		}
		
	}
	.right{flex-direction:row;flex: 3;padding:0.266667rem 0 0 0.266667rem;}
	.headerbar{height:1.066667rem;}
	#search{width: 5.706667rem;float: left;position: relative;margin: 0 0.266667rem;background: #fff;}
	.icon{float: right;background: #caa25a;border-radius: 50%;padding: 0.16rem;}
	.listShow{
		flex: 1;
		padding-bottom: 1.066667rem;
		.title{
		    padding-left: 14px;
		    height: 26px;
		    line-height: 26px;
		    border-left: 2px solid #d9dde1;
		    font-size: 12px;
		    color: rgb(147, 153, 159);
		    background: #f3f5f7;
		}
		.iconImg {margin-right: 0.2rem;}
		.iconImg img{width:2.4rem;height: 1.6rem;}
		.food-item{
		  display: flex;
		  margin: 0.24rem 0;
		  border-bottom: 1px solid #ccc;
		  padding:0.24rem;
		  position: relative;
		  .icon{
		    flex: 0 0 57px;
		    margin-right: 10px;
		  }
		  .content{
		    flex: 1;
		    .name{
		      margin: 0.1rem 0 0.4rem 0;
		      height: 14px;
		      line-height:0.373333rem;
		      font-size:0.373333rem;
		      color: rgb(7, 17, 27);
		    }
		    .desc, .extra{
		      line-height: 28px;
		      font-size: 20px;
		      color: rgb(147, 153, 159);
		    }
		    .desc{
		      line-height: 24px;
		      margin-bottom: 8px;
		    }
		    .extra{
		      .count{
		        margin-right: 12px;
		      }
		    }
		    .price{
		      font-weight: 700;
		      line-height: 0.373333rem;
		      margin-top: 0.7rem;
		      .now{
		        margin-right: 8px;
		        font-size: 0.373333rem;
		        color: #cba162;
		       }
		      .old{
		        text-decoration: line-through;
		        font-size: 10px;
		        color: rgb(147, 153, 159);
		      }
		    }
		    .cartcontrol-wrapper{
		      position: absolute;
		      right: 0.266667rem;
		      bottom: 0.266667rem;
		 
		    }
		  }
		}
	}
</style>
